<!-- el-pagination 二次封装 -->
<template>
	<div>
		<el-pagination
			v-show="total"
			v-model:current-page="curPage"
			v-model:page-size="pageSize"
			:page-sizes="pageSizes"
			:layout="layout"
			:total="total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		/>
	</div>
</template>

<script setup>
import { computed } from "vue"
const props = defineProps({
	page: { type: Number, default: 1 },
	size: { type: Number, default: 10 },
	total: { type: Number, default: 0 },
	layout: { type: String, default: "total, sizes, prev, pager, next, jumper" },
	pageSizes: {
		type: Array,
		default: () => [10, 20, 30, 50, 100],
	},
})

const emit = defineEmits(["update:size", "update:page", "pagination", "paginations"])

const pageSize = computed({
	get: () => props.size,
	set: val => {
		emit("update:size", val)
	},
})
const curPage = computed({
	get: () => props.page,
	set: val => {
		emit("update:page", val)
	},
})

function handleSizeChange(val) {
	emit("paginations", val)
}

function handleCurrentChange(val) {
	emit("pagination", val)
}
</script>
<style lang="scss" scoped>
@import "/style/basis";
:deep(.el-pagination__jump) {
	@include maxWidth(450) {
		display: none;
	}
}
:deep(.el-pagination__sizes) {
	@include maxWidth(450) {
		display: none;
	}
}
:deep(.el-pagination__editor) {
	width: 50px !important;
}
</style>
